<template>
  <div id="visa-countries" class="visa-countries">
    <div class="container">
      <h2 class="section-title">适用国家一览</h2>
      <p class="section-description">以下54个国家的公民可享受中国过境免签政策</p>
      
      <div class="country-groups">
        <div class="country-group">
          <h3 class="group-title">
            <font-awesome-icon :icon="faEarthEurope" class="group-icon" />
            欧洲
          </h3>
          <div class="countries-grid">
            <div class="country-item" v-for="country in europeCountries" :key="country.code">
              <div class="country-flag">{{ country.flag }}</div>
              <div class="country-name">{{ country.name }}</div>
            </div>
          </div>
        </div>
        
        <div class="country-group">
          <h3 class="group-title">
            <font-awesome-icon :icon="faEarthAmericas" class="group-icon" />
            美洲
          </h3>
          <div class="countries-grid">
            <div class="country-item" v-for="country in americaCountries" :key="country.code">
              <div class="country-flag">{{ country.flag }}</div>
              <div class="country-name">{{ country.name }}</div>
            </div>
          </div>
        </div>
        
        <div class="country-group">
          <h3 class="group-title">
            <font-awesome-icon :icon="faEarthAsia" class="group-icon" />
            亚洲与大洋洲
          </h3>
          <div class="countries-grid">
            <div class="country-item" v-for="country in asiaOceaniaCountries" :key="country.code">
              <div class="country-flag">{{ country.flag }}</div>
              <div class="country-name">{{ country.name }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="note-box">
        <p>注意：此列表仅供参考，具体政策以中国移民管理局发布的最新公告为准。请在旅行前确认您所持护照是否符合免签要求。</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { 
  faEarthEurope,
  faEarthAmericas,
  faEarthAsia
} from '@fortawesome/free-solid-svg-icons'

library.add(faEarthEurope, faEarthAmericas, faEarthAsia)

const europeCountries = [
  { name: '奥地利', code: 'AT', flag: '🇦🇹' },
  { name: '比利时', code: 'BE', flag: '🇧🇪' },
  { name: '保加利亚', code: 'BG', flag: '🇧🇬' },
  { name: '克罗地亚', code: 'HR', flag: '🇭🇷' },
  { name: '塞浦路斯', code: 'CY', flag: '🇨🇾' },
  { name: '捷克', code: 'CZ', flag: '🇨🇿' },
  { name: '丹麦', code: 'DK', flag: '🇩🇰' },
  { name: '爱沙尼亚', code: 'EE', flag: '🇪🇪' },
  { name: '芬兰', code: 'FI', flag: '🇫🇮' },
  { name: '法国', code: 'FR', flag: '🇫🇷' },
  { name: '德国', code: 'DE', flag: '🇩🇪' },
  { name: '希腊', code: 'GR', flag: '🇬🇷' },
  { name: '匈牙利', code: 'HU', flag: '🇭🇺' },
  { name: '冰岛', code: 'IS', flag: '🇮🇸' },
  { name: '爱尔兰', code: 'IE', flag: '🇮🇪' },
  { name: '意大利', code: 'IT', flag: '🇮🇹' },
  { name: '拉脱维亚', code: 'LV', flag: '🇱🇻' },
  { name: '立陶宛', code: 'LT', flag: '🇱🇹' },
  { name: '卢森堡', code: 'LU', flag: '🇱🇺' },
  { name: '马耳他', code: 'MT', flag: '🇲🇹' },
  { name: '荷兰', code: 'NL', flag: '🇳🇱' },
  { name: '波兰', code: 'PL', flag: '🇵🇱' },
  { name: '葡萄牙', code: 'PT', flag: '🇵🇹' },
  { name: '罗马尼亚', code: 'RO', flag: '🇷🇴' },
  { name: '俄罗斯', code: 'RU', flag: '🇷🇺' },
  { name: '斯洛伐克', code: 'SK', flag: '🇸🇰' },
  { name: '斯洛文尼亚', code: 'SI', flag: '🇸🇮' },
  { name: '西班牙', code: 'ES', flag: '🇪🇸' },
  { name: '瑞典', code: 'SE', flag: '🇸🇪' },
  { name: '瑞士', code: 'CH', flag: '🇨🇭' },
  { name: '英国', code: 'GB', flag: '🇬🇧' }
];

const americaCountries = [
  { name: '美国', code: 'US', flag: '🇺🇸' },
  { name: '加拿大', code: 'CA', flag: '🇨🇦' },
  { name: '巴西', code: 'BR', flag: '🇧🇷' },
  { name: '墨西哥', code: 'MX', flag: '🇲🇽' },
  { name: '阿根廷', code: 'AR', flag: '🇦🇷' },
  { name: '智利', code: 'CL', flag: '🇨🇱' }
];

const asiaOceaniaCountries = [
  { name: '日本', code: 'JP', flag: '🇯🇵' },
  { name: '韩国', code: 'KR', flag: '🇰🇷' },
  { name: '新加坡', code: 'SG', flag: '🇸🇬' },
  { name: '文莱', code: 'BN', flag: '🇧🇳' },
  { name: '阿联酋', code: 'AE', flag: '🇦🇪' },
  { name: '澳大利亚', code: 'AU', flag: '🇦🇺' },
  { name: '新西兰', code: 'NZ', flag: '🇳🇿' },
  { name: '卡塔尔', code: 'QA', flag: '🇶🇦' },
  { name: '马来西亚', code: 'MY', flag: '🇲🇾' },
  { name: '泰国', code: 'TH', flag: '🇹🇭' },
  { name: '蒙古', code: 'MN', flag: '🇲🇳' },
  { name: '菲律宾', code: 'PH', flag: '🇵🇭' },
  { name: '印度尼西亚', code: 'ID', flag: '🇮🇩' },
  { name: '乌克兰', code: 'UA', flag: '🇺🇦' },
  { name: '白俄罗斯', code: 'BY', flag: '🇧🇾' },
  { name: '阿曼', code: 'OM', flag: '🇴🇲' },
  { name: '塞尔维亚', code: 'RS', flag: '🇷🇸' }
];
</script>

<style scoped>
.visa-countries {
  padding: 80px 0;
  background-color: #f8fafc;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  text-align: center;
  font-size: 36px;
  color: #1a3a5f;
  margin-bottom: 16px;
  position: relative;
}

.section-description {
  text-align: center;
  color: #4a5568;
  margin-bottom: 50px;
  font-size: 18px;
}

.country-groups {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.country-group {
  background-color: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.group-title {
  font-size: 24px;
  color: #2c5282;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.group-icon {
  font-size: 24px;
  color: #16a34a;
}

.countries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
}

.country-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.country-item:hover {
  background-color: #f0fdf4;
}

.country-flag {
  font-size: 24px;
  margin-right: 10px;
}

.country-name {
  font-size: 16px;
  color: #2d3748;
}

.note-box {
  margin-top: 40px;
  padding: 20px;
  background-color: #fffbeb;
  border-left: 4px solid #f59e0b;
  border-radius: 6px;
}

.note-box p {
  color: #713f12;
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .countries-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@media (max-width: 480px) {
  .countries-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
  
  .country-flag {
    font-size: 20px;
  }
  
  .country-name {
    font-size: 14px;
  }
}
</style> 